<template>
    <div class="container">
       
        <div>
            <div class="crumbs"> 
            <div class="container">
                 <!-- <div class="lu hnk"></div><div class="hnk jgxx">设备信息</div> -->
                 <div class="jgcontainer">
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-row :gutter="20" style="margin-top:20px;">
                            <el-col :span="10" style="margin-left:50px;">
                                <el-form-item label="分类名称">
                                    <el-input class="handle-input" placeholder="" v-model="added.name"></el-input>
                                </el-form-item>
                                <el-form-item label="排序">
                                    <el-input class="handle-input" placeholder="数字越大排序靠后" v-model="added.sortNum"></el-input>
                                </el-form-item> 
                                <el-form-item label="上级分类">
                                    <el-select v-model="added.parentId"  style="width:300px;" @change="handleChange(list, $event)">
                                        <el-option v-for="(item,index) in fulist" :key="index" :label="item.name" :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="分类编码">
                                    <el-input class="handle-input" placeholder="一级分类无需设置编码，二级分类编码为3位数" v-model="added.code"></el-input>
                                </el-form-item>

                            </el-col>
                        </el-row>
                        <el-row :gutter="20" style="margin-top:20px;" v-if="xianshi">
                            <el-col :span="10" style="margin-left:50px;">
                                <el-form-item label="显示图片">
                                   <el-upload
                                        class="upload-poster"                          
                                            action="https://jsonplaceholder.typicode.com/posts/"
                                            :show-file-list="false"
                                            :on-change="imgPreview"
                                            :auto-upload="false">
                                            <img v-if="headImg" :src="headImg" class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                    jpg、png、gif格式，60x60像素，不超过2MB。一级分类需添加图标二级分类无需添加
                                </el-form-item>
                                
                            </el-col>
                          <!--  <el-col :span="10" style="margin-left:50px;">
                                <el-form-item label="点击图片">
                                    <el-upload
                                        class="upload-poster"                               
                                            action="https://jsonplaceholder.typicode.com/posts/"
                                            :show-file-list="false"
                                            :on-change="imgPreview1"
                                            :auto-upload="false">
                                            <img v-if="headImg1" :src="headImg1" class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                    jpg、png、gif格式，60x60像素，不超过2MB。一级分类需添加图标二级分类无需添加
                                </el-form-item>
                                
                            </el-col> -->
                        </el-row>
                    </el-form> 
                    <el-button type="success" style="margin-left:40%; margin-top:50px;" @click="classifysave">保存</el-button>
                    <el-button style="margin-left:20px; margin-top:50px;" @click ="back">返回</el-button>
                </div>
            </div>
        </div>
            
        </div>
    </div>
</template>

<script>
    import {modecategory_load,modecategory_root} from "@/request/api"
	import { modecategory_update } from "@/request/api" 
//   import axios from 'axios'
    export default {
        data(){
            return{
                headImg:'',
                headImg1:'',
                xianshi:true,
                files1:"",
                added:{
                    name:"",//分类名称
                    sortNum:0,//排序越大越靠后
                    parentId:"",//父Id
                    code:"",//编码
                    displayImg:"",//显示图片
                    clickImg:"",//点击图片
                    files:'',
					type:0
                },
                form:{},
                list:{},
                imageUrl:'',
                xl:{},
                imageUrl1:'',
                fulist:'',
				id:''
            }
        },
        mounted(){
            // this.getclassify()
            // this.getclassifys()
			this.id = this.$route.query.id
			if(this.id != undefined){
				this.init()
			}
            this.getshuju()
        },
        methods:{
			init(){
				modecategory_load(this.id).then((res)=>{
					this.added = res
					if(this.added.displayImg != "" && this.added.displayImg != null){
						this.headImg = this.$store.state.plantImg + this.added.displayImg
					}
					if(this.added.clickImg != "" && this.added.clickImg != null){
						this.headImg1 = this.$store.state.plantImg + this.added.clickImg
					}
					
				})
			},
            imgPreview(file,fileList) {
                this.headImg =  URL.createObjectURL(file.raw);
                let fileName = file.name;
                let regex = /(.jpg|.gif|.png|.jpeg)$/;
                if (regex.test(fileName.toLowerCase())) {
                    this.added.files = file.raw
                    this.added.displayImg = file.name
                } else {
                    this.$message.error('请选择图片文件');
                }
                
            },
            imgPreview1(file,fileList) {
                this.headImg1 =  URL.createObjectURL(file.raw);
                let fileName = file.name;
                let regex = /(.jpg|.gif|.png|.jpeg)$/;
                if (regex.test(fileName.toLowerCase())) {
                    this.files1 = file.raw
                    this.added.clickImg = file.name
                } else {
                    this.$message.error('请选择图片文件');
                }
                
            },
            handleChange(list, $event){
                // console.log($event)
                if($event == ""){
                    this.xianshi = true
                }else{
                    this.xianshi = false
                    this.displayImg = ""
                    this.clickImg = ""
                }
            },
            //获取上级分类的 id
    //         getclassify(){
				// let companyId = localStorage.getItem("companyId")
				// let userType = localStorage.getItem("userType")
				// let data = {
				// 	companyId:companyId,
				// 	userType:userType
				// }
    //             model_findByOne(data).then((res)=>{
    //                 this.fulist = res.data
    //             })
                
    //         },
            getshuju(){
              
                modecategory_root("").then((res)=>{
                    // console.log(res)
					this.fulist = res.data
                })
            
            },
            classifysave(){
                // let data = this.added
                let formdata = new FormData
				if(this.added.parentId != '' && this.added.parentId !=null){
					this.added.type=1
					// console.log(111)
				}else{
					this.added.type = 0
					// console.log(222)
				}
				this.added.type = parseInt(Number(this.added.type))
				// console.log(parseInt(Number(this.added.type)))
                for(var a in this.added){
                    if(this.added[a] == null || this.added[a] == "null"){
                        this.added[a] = ""
                        formdata.append(a,'') 
                    }else{
                        formdata.append(a,this.added[a])
                    }
                }
                // if(this.files1 != "" && this.files1 != null){
                //     formdata.append("files",this.files1)
                // }
                modecategory_update(formdata).then((res)=>{
                    this.$router.push({path:'/modelbase'})
                })
            },
            back(){
                this.$router.go(-1)
            }
        }
    }
      
</script>

<style scoped>
    .zfkhcheck_back{
        margin-left:500px;

    }
    .zfkhcheck_span{
        font-size:14px;
        margin:20px 30px;
        /* padding-top: 30px; */
    }
    .zfkhcheck_img{
        width:200px;
        height:100px;
        background:red;
    }
    .check-xx{
        font-size:14px;
        margin: 10px 20px 0px 20px;
    }
    .crumbs{
        width:95%;
        margin:0 auto;
        margin-top: 30px;
        /* background: #ffffff; */
    }
    .cons{
        padding:10px;
    }
    .lu{
        width: 8px;
        height: 16px;
        background: greenyellow;
    }
    .hnk{
        display:inline-block;
    }
    .jgxx{
        margin-left:10px ;
        font-weight:600;
        font-size: 15px;
    }
    .jgcontainer{
        font-weight: 400;
    }
    .con{
        width:40%;
        padding: 20px;
        font-size: 14px;
        margin-left: 20px;
    }
    .handle-input {
        width: 300px;
        display: inline-block;
        /* margin-left: 30px; */
    }
     .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width:180px;
    overflow: hidden;
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  
  
</style>